<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/litewebchat.css" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="./css/main.css" />
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

		<style type="text/css">
			body 
			{
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<body>

			<el-container id="app" class="paper">
				<el-header>
				<div class="app-title">可爱の{{botNick}}</div>
				</el-header>
				<el-main>
					<!-- 主容器 -->
					<el-row :span="22">
						<div class="lite-chatbox">

							<div v-for="message in messageList" class="cmsg" v-bind:class="message.direction">

								<img class="headIcon radius" ondragstart="return false;" oncontextmenu="return false;" v-bind:src="['./img/avatar/'+message.avatar]" />
								<span class="name">{{ message.nick }}</span>
								<span class="content">{{ message.msg }}</span>
							</div>
						</div>
					</el-row>

					<div class="inputBox">
						<el-row>
							<el-col :span="18">
								<el-input v-model="inputBox" @keyup.enter.native="send" placeholder="请输入内容"></el-input>
							</el-col>
							 
							<el-col :span="4">
								<el-button @click="send" >发送</el-button>
								<el-col>
						</el-row>
					</div>
				</el-main>
				
			</el-container>
			<el-row><div class="powered">Powered by <a href="https://github.com/Fzoss/MoeChat">MoeChat</a></div></el-row>
		</body>
		
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data() {
					return {
						messageList: [],
						inputBox: '',
						botNick: '赤岛酱',
						thesaurus: '',
						botAvatar: 'C.png',
						myAvatar: 'B.jpg'
					}
			
				},
				methods: {
					getThesaurus: function() {
						axios.get('https://raw.githubusercontent.com/Kyomotoi/AnimeThesaurus/main/data.json')
							.then((response) => this.thesaurus = response.data)
					},
					send: function() {
						this.messageList.push({
							nick: '你',
							msg: this.inputBox,
							direction: 'cright',
							avatar: this.myAvatar
						});
						var words = [],
							reply = '';
						for (obj in this.thesaurus) {
							if (this.inputBox.indexOf(obj) != -1) {
								words.push(obj);
							}
						}
			
						if (words.length != 0) {
							word = words[Math.floor(Math.random() * words.length)];
							list = this.thesaurus[word];
						} else {
							list = ["唔，没有搞懂主人在说什么诶", "没有听懂qwq", "虽然不知道在说什么，但感觉很厉害的样子~", "我是不是太笨啦，没理解主人什么意思qaq"]
						}
						reply = list[Math.floor(Math.random() * list.length)];
						this.messageList.push({
							nick: this.botNick,
							msg: reply,
							direction: 'cleft',
							avatar: this.botAvatar
						});
						setTimeout(() => {
							var div = document.getElementsByClassName('el-main')[0];
							div.scrollTop = div.scrollHeight;
							this.inputBox = '';
						}, 100)
					}
				},
				created: function() {
					this.getThesaurus();
					this.messageList.push({
						nick: this.botNick,
						msg: '你好呀',
						direction: 'cleft',
						avatar: this.botAvatar
					});
				}
			});
		</script>
</html>
